<template>
	<div class="info">
		<div class="infoimg" id="refimg">
			<img  src="../../../public/img/infoimg/加载.png" />
		</div>
		
		<!-- 轮播区域 -->
		<div class="info-banner">
			<!-- 头部矢量图 -->
			<div class="banner-top">
				<i class="iconfont icon-zuojiantou" @click="gethome()"></i>
				<i class="iconfont icon-liebiao" @click="getuser()"></i>
			</div>
			<div class="banner-img swiper">
				<ul class="swiper-wrapper">
					<template v-if="destImages.length>0">
					<li class="swiper-slide" v-for="(item,index) in destImages" :key="index" >
						<img  :src="item.imgUrl"/>
					</li>
					</template>
					<template v-else>
						<li class="banner-img2">
							<img src="../../../public/img/infoimg/图片加载失败.png"/>
							<p>当前网络波动较大，图片正在加载！</p>
						</li>
					</template>
				</ul>
			</div>
			<template v-if="destImages.length>0">
			<!-- 底部 -->
			<div class="banner-buttom">
				<div class="banner-buttom-left">
					<span>{{product_cate_type_one}}<em>·</em></span>
					<span>{{product_cate_type_two}}<em>·</em></span>
					<span>{{product_cate_type_three}}<em>·</em></span>
					<span>{{days}}</span>
				</div>
				<div class="banner-buttom-right" >
					{{imgIndex}}/5
				</div>
			</div>
			</template>
		</div>
		<Product></Product>
		<Evaluate></Evaluate>
		<UserHB></UserHB>
		<div class="interval"></div>
		<div class="info-bottom">
			<div class="info-bottom-img">
				<img src="../../../public/img/infoimg/customer_service.png" >
				<p>客服</p>
			</div>
			<div class="info-bottom-img">
				<img src="../../../public/img/infoimg/collection.png" >
				<p>收藏</p>
			</div>
			<div class="button">
				<button type="button">立即报名</button>
			</div>
		</div>
	</div>
</template>

<script>
	var that = null;
	import {mapMutations} from 'vuex'
	//引入组件
	import UserHB from '../home/pages/UserHB.vue'
	import Product from './page/Product.vue';
	import Evaluate from './page/Evaluate.vue'
	// 1.引入vue周期函数
	import {onMounted} from 'vue';
	// 2.引入swiper的动态组件
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
	}from 'swiper';
	//3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube]);
	export default{
		name:'Info',
		data(){
			return{
				destImages:[],//轮播图
				product_cate_type_one:'',//旅游出行方式
				product_cate_type_two:'',//旅游出行方式
				product_cate_type_three:'',//旅游出行方式
				days:'',//旅游天数
				imgIndex:1,
			}
		},
		//加载组件
		components:{
			Product,
			Evaluate,
			UserHB
		},
		methods:{
			gethome(){
				this.gettitle('全球经典')
				this.$router.push({path:'/'})
			},
			getuser(){
				this.$router.push({path:'/user'})
			},
			...mapMutations(['gettitle'])
		},
		beforeCreate() {
		  that = this;
		},
		created() {
			let id = this.$route.query.pid
			this.axios.get('https://m.youxiake.com/api/m/product/lines/detail?pid='+id).then((res)=>{
				let data = res.data.data
				for(let i in data.destImages){
					if(i<=4){
						this.destImages.push(data.destImages[i])
					}
				}
				new Swiper('.banner-img',{
					observer:true,//修改swiper自己或者子元素时，自动初始化swiper
					observeParents:true,//修改swiper的父元素，自动初始化swiper
					slidesPerView : 'auto',
					on:{
						slideChangeTransitionEnd:function(){
							 that.imgIndex=(this.activeIndex+1)
						}
					}
				})
			}).catch((error)=>{
				console.log(error);
			}),
			this.axios.get('https://m.youxiake.com/api/m/product/detail?pid='+id).then((res)=>{
				let data = res.data.data;
				this.product_cate_type_one=data.product.product_cate_type[0]
				this.product_cate_type_two=data.product.product_cate_type[1]
				this.product_cate_type_three=data.product.product_cate_type[2]
				this.days=data.productCache.days//天数
				refimg.style.display='none'
			}).catch((error)=>{
				console.log(error);
			})
		},
	}
</script>

<style scoped>
	/* 使用深度穿透修改子组件的样式：写法:当前组件的最外层class >>>或/deep/ 子组件需要修改的class */
	.info >>> .userhb{
		bottom: 2.1rem;
	}
	.banner-img2{
		margin: 0 auto;
		margin-bottom: 0.3rem;
		font-size: 0.5rem;
		text-align: center;
	}
	.banner-img2 img{
		width: 100% !important;
		height: 90% !important;
	}
	.banner-img2 p{
		font-weight: bold;
	}
	.info{
		width: 100%;
		overflow: hidden;
	}
	.infoimg{
		position: fixed;
		top: 50%;
		left: 40%;
		z-index: 50;
		width: 2rem;
	}
	.infoimg img{
		animation: infoiamges 2s  infinite linear ;
		width: 100%;
		height: 100%;
	}
	@keyframes infoiamges{
		from{
			transform:rotate(0deg);
		}
		to{
			transform:rotate(360deg);
		}
	}
	.info .info-banner{
		width: 100%;
		height: 5.6rem;
		position: relative;
	}
	.info .info-banner .banner-img{
		position: absolute;
		width: 100%;
		background: rgba(0,0,0,0.2);
		height: 100%;
	}
	.info .info-banner .banner-img ul li{
		float: left;
	}
	.info .info-banner .banner-top{
		position: absolute;
		z-index: 5;
		height: 20%;
		width: 95%;
		left: 50%;
		margin-left: -47.5%;
		top: 5%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.info .info-banner .banner-top i{
		text-align: center;
		color: white;
		border-radius: 0.5rem;
		width: 0.8rem;
		line-height: 0.8rem;
		background: rgba(0,0,0,0.4);
	}
	.info .info-banner .banner-img img{
		width: 100%;
		height: 100%;
	}
	.info .info-banner .banner-buttom{
		position: absolute;
		z-index: 5;
		height: 20%;
		width: 95%;
		left: 50%;
		margin-left: -47.5%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 5%;
	}
	.info .info-banner .banner-buttom-left{
		color:  #f3f3f3;
	}
	.info .info-banner .banner-buttom-left span em{
		margin: 0 0.08rem;
	}
	.info .info-banner .banner-buttom-right{
		background-color: rgba(0,0,0,0.7);
		border-radius: 0.2rem;
		width: 1rem;
		padding: 0.06rem 0;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #dfdfdf;
	}
	.info-bottom {
		padding: 0.4rem 0;
		box-shadow: 1px 1px 5px #c1c1c1 ;
		bottom: 0;
		width: 100%;
		position: fixed;
		display: flex;
		z-index: 100;
		justify-content: space-between;
		background-color: white;
	}
	.info-bottom-img{
		width: 19%;
		text-align: center;
	}
	.info-bottom-img img{
		width: 0.8rem;
	}
	.info-bottom .button{
		width: 70%;
		text-align: center;
	}
	.info-bottom .button button{
		border: none;
		width: 90%;
		height: 97%;
		border-radius: 0.7rem;
		color: white;
		background-color: #ff7600;
	}
	.interval{
		width: 100%;
		height: 2.5rem;
	}
</style>
